<template>
  <div class="persondata">
    <div class="line">
      <span>|</span>
      <span>{{ cropName }}</span>
    </div>
    <div class="header">
      <div class="left">
        <el-date-picker
          v-model="startvalue"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始时间"
        />
        <el-date-picker
          v-model="endvalue"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="结束时间"
        />
        <el-select v-model="reviewStatus" placeholder="请选择" @change="ChangeValue">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="inputName" placeholder="请输入实训报告名称" style="width:200px" />
        <el-button size="medium" @click="handleSearch(inputName)">搜索</el-button>
      </div>
      <div class="right">
        <el-button v-show="role=='student'" size="medium" type="primary" icon="el-icon-folder-add" @click="createNewReport">新增</el-button>
        <el-button size="medium" type="danger" icon="el-icon-delete" @click="handledelete">删除</el-button>
        <el-button size="medium" type="primary" icon="el-icon-arrow-left" @click="goback">返回</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="77"
        />
        <el-table-column
          label="序号"
          width="130"
          type="index"
        />
        <el-table-column
          prop="trainingReportName"
          label="实训报告名称"
          width="130"
        />
        <el-table-column
          prop="studentName"
          label="提交人"
          width="120"
        />
        <el-table-column
          prop="gradeName"
          label="年级"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="className"
          label="班级"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="score"
          label="得分"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="reviewStatus"
          label="评阅状态"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="batch"
          label="批次"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createTime"
          label="提交时间"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleLook(scope.$index, scope.row)"
            >查看</el-button>
            <el-button
              v-if="scope.row.reviewStatus==`待评语`"
              size="mini"
              type="primary"
              @click="modifyReport(scope.$index,scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handledeleteOne(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑实训报告" :visible.sync="dialogFormVisible" width="540px">
        <el-form :model="form">
          <el-form-item label="实训报告名称:" required :label-width="formLabelWidth">
            <el-input v-model="form.trainingReportName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="批次:" required :label-width="formLabelWidth">
            <el-input v-model="form.batch" autocomplete="off" />
          </el-form-item>
          <el-form-item label="文件(.pdf):" required :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              action="1"
              :auto-upload="false"
              :limit="1"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :file-list="form.fileList"
            >
              <el-button size="small" type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="isNew == 'true'" type="primary" @click="submitNewReport">确 定</el-button>
          <el-button v-else type="primary" @click="submitEditReport">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<style>
.el-dialog__header {
    /* background-color:blue; */
    color: red;
    padding: 20px;
    padding-bottom: 10px;
}
</style>

<script>
import { getReportList } from '@/api/report'
import { deleteReportDetail } from '@/api/report'
import { AddReportDetail } from '@/api/report'
import { deleteMoreReport } from '@/api/report'
import { getModifyReport, postModifyReport } from '@/api/report' // 学生编辑修改实训报告d

export default {
  name: 'Persondata',
  data() {
    return {
      modifyReportId: '',
      isNew: 'true',
      cropId: '',
      cropName: '',
      role: '',
      inputName: '',
      reviewStatus: '',
      startvalue: '',
      endvalue: '',
      tableData: [],
      multipleSelection: [],
      options: [
        {
          value: '',
          label: '全部状态'
        },
        {
          value: '待评语',
          label: '待评语'
        },
        {
          value: '已评阅',
          label: '已评阅'
        }],
      dialogFormVisible: false,
      form: {
        trainingReportName: '',
        batch: '',
        fileList: []
      },
      formLabelWidth: '120px',
      listLoading: true
    }
  },
  created() {
    this.cropId = this.$route.params.cropId
    this.cropName = this.$store.getters.cropName
    const studentnewData = {
      cropId: this.cropId,
      studentId: this.$store.getters.id
    }
    const teachernewData = {

    }
    getReportList(studentnewData).then(res => {
      this.tableData = res.data.records
      this.listLoading = false
    })
    this.role = this.$store.getters.roles[0]
    console.log(this.role)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    newfetch() {
      this.listLoading = true
      this.cropId = this.$route.params.cropId
      const newData = {
        cropId: this.cropId,
        studentId: this.$store.getters.id
      }
      getReportList(newData).then(res => {
        this.tableData = res.data.records
        this.listLoading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleLook(index, row) { // 跳转到个人数据详情页面
      this.$router.push(`/trainning/lookReport/${row.trainingReportId}`)
    },
    handledeleteOne(index, row) {
      console.log(row.trainingReportId)
      const deleteData = {
        trainingReportId: row.trainingReportId
      }
      deleteReportDetail(deleteData).then(res => {
        this.newfetch()
      })
    },
    modifyReport(index, row) {
      this.isNew = 'false';
      this.modifyReportId = row.trainingReportId;
      const getData = {
        trainingReportId: row.trainingReportId
      }
      getModifyReport(getData).then(res => {
        this.form.trainingReportName = res.data.trainingReportName
        this.form.batch = res.data.batch
        let modiFile = {
          url: res.data.url,
          name: res.data.fileName
        }
        this.form.fileList.splice(0,1,modiFile)
      })
      this.dialogFormVisible = true
    },
    submitEditReport() {
      console.log()
      let modifyData = {
        batch: this.form.batch,
        cropId: this.cropId,
        studentId: this.$store.getters.id,
        trainingReportName: this.form.trainingReportName,
        trainningId: this.modifyReportId
      };
      let fileForm = new FormData()
      fileForm.append('file', this.form.fileList[0].raw)
      postModifyReport(fileForm,modifyData).then( res => {
        this.newfetch()
      })
    },
    handledelete() {
      console.log(this.multipleSelection)
      const trainingReportIds = []
      this.$confirm('确定要删除吗?删除后不能恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          trainingReportIds[i] = this.multipleSelection[i].trainingReportId
          deleteMoreReport(trainingReportIds[i]).then(res => {
            this.newfetch()
          })
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleChange(file, fileList) {
      this.form.fileList.push(file)
    },
    handleRemove(file,fileList){
      console.log(file,fileList)
    },
    handleSearch(inputName) {
      this.listLoading = true
      const searchData = {
        cropId: this.cropId,
        studentId: this.$store.getters.id,
        endTime: this.endvalue,
        startTime: this.startvalue,
        reviewStatus: this.reviewStatus,
        trainingReportName: this.inputName
      }
      if (searchData.endTime === '') {
        delete searchData.endTime
      }
      if (searchData.startTime === '') {
        delete searchData.startTime
      }
      if (searchData.reviewStatus === '') {
        delete searchData.reviewStatus
      }
      if (searchData.trainingReportName === '') {
        delete searchData.trainingReportName
      }
      console.log(this.reviewStatus)
      getReportList(searchData).then(res => {
        this.tableData = res.data.records
        this.listLoading = false
        console.log(res)
      })
    },
    ChangeValue() {
      this.listLoading = true
      const searchData = {
        cropId: this.cropId,
        studentId: this.$store.getters.id,
        reviewStatus: this.reviewStatus
      }
      console.log(this.reviewStatus)
      getReportList(searchData).then(res => {
        this.tableData = res.data.records
        this.listLoading = false
        console.log(res)
      })
    },
    createNewReport() {
      this.isNew = 'true'
      this.form.trainingReportName = '';
      this.form.batch = '';
      this.form.fileList = [];
      this.dialogFormVisible = true
    },
    submitNewReport() {
      const CreateNewData = {
        cropId : this.cropId,
        studentId : this.$store.getters.id,
        trainingReportName: this.form.trainingReportName,
        batch: this.form.batch
      }
      const CreateFile = new FormData()
      CreateFile.append('file', this.form.fileList[0].raw)
      console.log(CreateNewData)
      console.log(this.form.fileList[0])
      AddReportDetail(CreateFile, CreateNewData).then(res => {
        if (res.message == '成功！') {
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '提交失败！',
            type: 'error'
          })
        }
        this.newfetch()
      })
      this.dialogFormVisible = false
    }
  }
}
</script>
<style scoped>
    .line{
        width: 100%;
        color: #345E8F;
        font-size: 16px;
        margin-bottom: 1%;
    }
    span:first-child{
        font-weight: bold;
        margin-right: 1%;
        font-size: 18px;
    }
    .header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 1%;
    }
    .left{
        display: flex;
        justify-content: flex-start;
    }
    .dialog-footer{
      text-align: center;
    }
    .el-dialog__header {
    background-color: blue;
    padding: 20px;
    padding-bottom: 10px;
}
</style>
